<template>
    <inner-layout v-loading="loading">

        <div class="filter-bar clearfix">
            <div class="filter-item">
                <i class="el-icon-info"></i> 升水 = 期货价格 - 指数价格，值为负数时表示是贴水；升水率 = 升水 / 指数价格 * 100
            </div>

            <div class="filter-item">
                <el-button :disabled="loading" @click="filterData">刷新</el-button>
            </div>
        </div>
        

        <div v-for="item in futuresSymbolList" :key="item">
            <div class="list-wrap" v-if="dataList[item]">
                <el-table :data="dataList[item]" stripe style="width:100%">
                    <el-table-column
                        prop="symbol"
                        label="期货代码">
                    </el-table-column>
                    <el-table-column
                        prop="current"
                        label="期货价格">
                    </el-table-column>
                    <el-table-column
                        prop="inxPrice"
                        label="指数价格">
                    </el-table-column>
                    
                    <el-table-column label="升水">
                        <template slot-scope="scope">
                            {{ (scope.row.current - scope.row.inxPrice).toFixed(2) }}
                        </template>
                    </el-table-column>

                    <el-table-column label="升水率">
                        <template slot-scope="scope">
                            {{ ((scope.row.current - scope.row.inxPrice) / scope.row.inxPrice * 100).toFixed(2) }}%
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>


        <div class="tip-wrap">
            <!-- <div><i class="el-icon-info"></i>股指期货数据来源：新浪；指数数据来源：集思录</div> -->
            <div><i class="el-icon-info"></i>股指期货数据来源：同花顺；指数数据来源：集思录</div>
            <div class="fr">
                <!-- <a href="http://vip.stock.finance.sina.com.cn/quotes_service/view/qihuohangqing.html#titlePos_3" target="_blank">去新浪查看详情&gt;&gt;</a>&nbsp;&nbsp;&nbsp;&nbsp; -->
                <a href="http://futures.10jqka.com.cn/" target="_blank">去同花顺查看详情&gt;&gt;</a>&nbsp;&nbsp;&nbsp;&nbsp;
                <a href="https://www.jisilu.cn/data/idx_performance/#idx" target="_blank">去集思录查看详情&gt;&gt;</a>
            </div>
        </div>
    </inner-layout>
</template>

<script>
import { getSinaQuote, praseSinaJsStr, getSinaInxFuturesSymbol } from '@/api/sina'
import { get10JqkaQuote, prase10JqkaJsStr } from '@/api/jqka10'
import { getJisiluIdxPerformanceList } from '@/api/jisilu'
export default {
	name: 'InxFutures',
	components: { },
    directives: { },
	mixins: [],
	data() {
		return {
			loading: false,
            futuresSymbolList: ['IH', 'IF', 'IC'],
            inxSymbolList: ['000016', '399300', '000905'],
            inxSymbolListFor10jqka: ['1B0016', '1B0300', '1B0905'],
			dataList: {}
		}
	},
	created() {
		this.getPageData()
	},
	methods: {
		getPageData() {
            let that = this
			that.loading = true
			getJisiluIdxPerformanceList().then((res) => {
                that.loading = false
				console.log('getPageData', res)
                if (res.data.rows) {
                    res.data.rows.forEach(row => {
                        let _i = that.inxSymbolList.indexOf(row.id)
                        if (_i > -1) {
                            // that.getFuturesData(that.futuresSymbolList[_i], row.cell.price * 1)
                            that.getFuturesDataFor10jqka(_i, row.cell.price * 1)
                        }
                    })
                }
			})
		},
        getFuturesData(symbol, indexPrice) {
            let that = this
            //symbol = IF / IH / IC
            getSinaInxFuturesSymbol(symbol).then(res => {
                let _futuresList = []
                res.data.forEach(row => {
                    if (row.symbol && row.symbol != symbol + '0') {
                        _futuresList.push('nf_' + row.symbol)
                    }
                })

                if (_futuresList.length > 0) {
                    getSinaQuote(_futuresList.join(',')).then(res2 => {
                        if (res2.err_code === 0) {
                            let _jsStr = praseSinaJsStr(res2.data) || {}
                            let _list = []
                            Object.keys(_jsStr).forEach(k => {
                                _list.push({
                                    symbol: k.replace(/nf_/g, ''),
                                    current: _jsStr[k][3] * 1,
                                    inxPrice: indexPrice
                                })
                            })

                            that.dataList[symbol] = _list
                            that.dataList = Object.assign({}, that.dataList)
                            console.log('getSinaQuote', that.dataList)
                        }
                    })
                }
            })
        },
        getFuturesDataFor10jqka(symbolIndex, indexPrice) {
            let that = this
            //symbol = IF / IH / IC
            let symbol = that.futuresSymbolList[symbolIndex]
            getSinaInxFuturesSymbol(symbol).then(res => {
                let _futuresList = []
                res.data.forEach(row => {
                    if (row.symbol && row.symbol != symbol + '0') {
                        _futuresList.push(row.symbol)
                    }
                })

                if (_futuresList.length > 0) {
                    get10JqkaQuote(that.inxSymbolListFor10jqka[symbolIndex] + ',' + _futuresList.join('_')).then(res2 => {
                        if (res2.err_code === 0) {
                            let _jsStr = prase10JqkaJsStr(res2.data) || {}
                            let _symbolQuote = _jsStr['129'] || {}
                            let _list = []
                            Object.keys(_symbolQuote).forEach(k => {
                                _list.push({
                                    symbol: k,
                                    current: _symbolQuote[k]['10'] * 1,
                                    inxPrice: indexPrice
                                })
                            })

                            that.dataList[symbol] = _list
                            that.dataList = Object.assign({}, that.dataList)
                            console.log('get10JqkaQuote', that.dataList)
                        }
                    })
                }
            })
        },
        filterData() {
            this.getPageData()
        }
	}
}
</script>

<style lang="scss" scoped>
    .list-wrap {
        margin-top: 30px;
    }
    .tip-wrap {
        padding: 30px 0;
        font-size: 13px;
        line-height: 26px;
    }
</style>
